<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>我的购物车 - 京东商城</title>
    <link type="text/css" rel="stylesheet"
          href="http://misc.360buyimg.com/jdf/1.0.0/unit/??ui-base/1.0.0/ui-base.css,shortcut/2.0.0/shortcut.css,global-header/1.0.0/global-header.css,myjd/2.0.0/myjd.css,nav/2.0.0/nav.css,shoppingcart/2.0.0/shoppingcart.css,global-footer/1.0.0/global-footer.css,service/1.0.0/service.css">
    <link type="text/css" rel="stylesheet"
          href="http://misc.360buyimg.com/user/cart/widget/??common/common.css,header-2015/header-2015.css,cart-sidebar/cart-sidebar.css,cart-sidebar-follow/cart-sidebar-follow.css,cart-filter-bar/cart-filter-bar.css,cart-similar/cart-similar.css,cart-gift/cart-gift.css,order-combined/order-combined.css,unmarket/unmarket.css,cart-inner-new/cart-inner-new.css,cart-toolbar-new/cart-toolbar-new.css,cart-removed/cart-removed.css,cart-full/cart-full.css,cart-tabs-new/cart-tabs-new.css,p-detect/p-detect.css,backpanel/backpanel.css"
          source="widget">
</head>
<body>
<!-- main -->
<div id="container" class="cart">
    <div class="w">
        <div id="chunjie" class="mb10" style="width: 100%;">
            <img
                    src="http://img30.360buyimg.com/da/jfs/t3838/135/3330063088/34045/72f54f8f/58841a43Nc8ea0ea1.jpg"
                    width="990"
                    height="45"></div>
        <div class="cart-filter-bar">
            <ul class="switch-cart">
                <li class="switch-cart-item curr">
                    <a href="#none">
                        <em>全部商品</em>
                        <span class="number">{{goodsList.length}}</span>
                    </a>
                </li>
            </ul>
            <div class="cart-store">
                <span class="label">&nbsp;</span>
            </div>
            <div class="clr"></div>
            <div class="w-line">
                <div class="floater" style="width: 78px; left: 0px;"></div>
            </div>
            <div class="tab-con ui-switchable-panel-selected" style="display: block;"></div>
        </div>
    </div>
    <div class="cart-warp">
        <div class="w">
            <div id="jd-cart">
                <div class="cart-main cart-main-new">
                    <div class="cart-thead">
                        <div class="column t-checkbox">
                            <div class="cart-checkbox">
                                <input type="checkbox" id="checkAll" class="jdcheckbox" @click="checkAll()">
                                <label class="checked" for="">勾选全部商品</label>
                            </div>
                            全选
                        </div>
                        <div class="column t-goods">商品</div>
                        <div class="column t-props"></div>
                        <div class="column t-price">单价</div>
                        <div class="column t-quantity">数量</div>
                        <div class="column t-sum">小计</div>
                        <div class="column t-action">操作</div>
                    </div>
                    <div id="cart-list">
                        <div class="cart-item-list" id="cart-item-list-01">
                            <div class="cart-tbody" id="vender_8888">
                                <div class="item-list">
                                    <!--单品-->
                                    <!-- 单品-->
                                    <div class="item-single  item-item item-selected  " v-for="(g,index) in goodsList">
                                        <div class="item-form">
                                            <div class="cell p-checkbox">
                                                <div class="cart-checkbox">
                                                    <!--单品-->
                                                    <input  type="checkbox" name="checkItem" @click="ckeckOne(index)"
                                                           class="jdcheckbox" >
                                                    <label for="" class="checked">勾选商品</label>
                                                    <span class="line-circle"></span>
                                                </div>
                                            </div>
                                            <div class="cell p-goods">
                                                <div class="goods-item">
                                                    <div class="p-img">
                                                        <a href="http://item.jd.com/3702588.html" target="_blank"
                                                           class="J_zyyhq_3702588"><img
                                                                :alt="g.goodsName"
                                                                :src="g.goodsImage"></a>
                                                    </div>
                                                    <div class="item-msg">
                                                        <div class="p-name">
                                                            <a href="http://item.jd.com/3702588.html" target="_blank">
                                                                {{g.goodsName}}
                                                            </a>
                                                        </div>
                                                        <div class="p-extend">
                                                            </span>
                                                            <span class="promise" _yanbao="yanbao_3702588_"><i
                                                                    class="jd-service-icon"></i><a data-tips="购买增值保障"
                                                                                                   class="ftx-03 jd-service"
                                                                                                   href="#none">{{g.goodsTips}}</a></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="cell p-props p-props-new">
                                                <div class="props-txt" :title="g.goodsProps.color">
                                                    颜色：{{g.goodsProps.color}}
                                                </div>
                                                <div class="props-txt" v-if="g.goodsProps.size"
                                                     title="g.goodsProps.size">尺码：{{g.goodsProps.size}}
                                                </div>
                                            </div>
                                            <div class="cell p-price">
                                                <strong>{{'¥ ' +g.price}}</strong>
                                            </div>
                                            <div class="cell p-quantity">
                                                <!--单品-->
                                                <div class="quantity-form">
                                                    <a href="javascript:void(0);" class="decrement"
                                                       @click="minus(index)">-</a>
                                                    <input type="text" class="itxt"
                                                           :value="g.quantity"
                                                           minnum="1" style="height: 22px;width: 46px;">
                                                    <a href="javascript:void(0);" class="increment" @click="add(index)">+</a>
                                                </div>
                                                <div class="ac ftx-03 quantity-txt">
                                                    {{g.stock>=g.quantity ? '有货' : '库存不足'}}
                                                </div>
                                            </div>
                                            <div class="cell p-sum">
                                                <strong>{{'¥ ' +(g.price * g.quantity).toFixed(2)}}</strong>
                                                <span class="weight" id="weight_3702588" :data="g.weight" fresh=""
                                                      skuid="3702588" num="1" afterprice="7959.00">{{g.weight}}kg</span>
                                            </div>
                                            <div class="cell p-ops">
                                                <!--单品-->
                                                <a @click="del(index)" href="javascript:void(0);">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="cart-floatbar">
                <div class="ui-ceilinglamp-1" style="width: 990px; height: 52px;">
                    <div class="cart-toolbar" style="width: 988.4px; height: 50.4px;">
                        <div class="toolbar-wrap">
                            <div class="selected-item-list hide">
                            </div>
                            <div class="options-box">
                                <div class="operation">
                                    <a href="#none"
                                       class="remove-batch" @click="bathDel()">删除选中的商品</a>
                                </div>
                                <div class="clr"></div>
                                <div class="toolbar-right">
                                    <div class="normal">
                                        <div class="comm-right">
                                            <div class="btn-area">
                                                <a href="javascript:void(0);" onclick="return false;"
                                                   class="submit-btn"
                                                   data-bind="1">
                                                    去结算<b></b></a>
                                            </div>
                                            <div class="price-sum">
                                                <div>
                                                    <span class="txt txt-new">总价：</span>
                                                    <span class="price sumPrice"><em>{{'¥ '+ totlePrice}}</em></span>
                                                </div>
                                            </div>
                                            <div class="amount-sum">
                                                已选择<em>{{totleCount}}</em>件商品<b class="up"></b>
                                            </div>
                                            <div class="clr"></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cart-removed">
                <div class="r-tit">已删除商品，您可以重新购买或加关注：</div>
            </div>
        </div>
    </div>

    <div class="w">
    </div>

</div>

<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="./data/data.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#container",
        data: {
            goodsList: [],
        },
        methods: {
            loadGoods: function () {//加载数据
                var $this = this;
                /**
                 * 网络请求获取json数据
                $this.$http.get("./data/data.json").then(function (data) {
                    var list  = data.body;
                    for(var i=0;i<list.length;i++){
                        list[i].isChecked=false;
                    }
                    $this.goodsList = list;
                })
                 */
                //
                for(var i=0;i<data.length;i++){
                    data[i].isChecked=false;
                }
                $this.goodsList = data;
            },
            minus: function ($index) {//减少
                var goods = this.goodsList[$index];
                if (goods.quantity > 1) {
                    goods.quantity--;
                }
            },
            add: function ($index) {//添加
                var goods = this.goodsList[$index];
                goods.quantity++;
            },
            checkAll: function () {//全选
                var checkBox = document.getElementById("checkAll");
                var checkItems = document.getElementsByName("checkItem");
                for (var i = 0; i < checkItems.length; i++) {
                    if (checkBox.checked == true) {
                        checkItems[i].checked = true;
                        this.goodsList[i].isChecked=true;
                    } else {
                        checkItems[i].checked = false;
                        this.goodsList[i].isChecked=false;
                    }

                }
            },
            ckeckOne: function ($index) {//选中
                var checkBox = document.getElementById("checkAll");
                var goods = this.goodsList[$index];
                if(goods.isChecked){
                    goods.isChecked=false;
                }else{
                    goods.isChecked=true;
                }
                var checkSize=0
                //判断商品是否全部选中  操作全选按钮
                for(var i=0;i<this.goodsList.length;i++){
                    if(this.goodsList[i].isChecked){
                        checkSize++;
                    }
                }
                if(checkSize==this.goodsList.length){
                    checkBox.checked=true;
                }else{
                    checkBox.checked=false;
                }
            },
            del:function ($index) {//删除
                var goods = this.goodsList[$index];
                this.goodsList.splice($index,1);
            },
            bathDel:function () {//批量删除选中
                for (var i = this.goodsList.length; i >0; i--) {
                   var goods = this.goodsList[i-1];
                   if(goods.isChecked){
                       this.goodsList.splice((i-1),1);
                   }
                }
            }
        },
        computed: {
            totlePrice: function () {//选中商品总价
                var price = 0;
                for (var i = 0; i < this.goodsList.length; i++) {
                    var _self = this.goodsList[i];
                    if (_self.isChecked) {
                        price += Number(_self.price * _self.quantity);
                    }
                }
                return price.toFixed(2);
            },
            totleCount: function () {//选中商品数量
                var num = 0;
                for (var i = 0; i < this.goodsList.length; i++) {
                    var _self = this.goodsList[i];
                    if (_self.isChecked) {
                        num += Number(_self.quantity);
                    }
                }
                return num;
            }
        },
        mounted: function () {
            this.loadGoods();
        }

    })
</script>

</body>
</html>